<template>
	<div class="page">
		<!-- 排序 -->
		<div class="sort-view c-panel">
			<div class="btns-view">
    				<Button 
    					type="primary" 
    					@click="click2Sort()"
    					style="margin-right: 10px;"
    					:loading="sortBtnLoading">
    					{{data.sortable ? '保存排序' : '选择排序'}}
    				</Button>
    				<Button 
    					type="ghost" 
    					v-if="data.sortable"
    					@click="click2CancelSort()">
    					取消排序
    				</Button>
			</div>
			
			<div class="data-view">
				<CAttributeTagGroupSortView
					:data="data">
				</CAttributeTagGroupSortView>
			</div>
		</div>
		
		<div class="data-view c-panel">
    			<div class="btns-view">
    				<Button 
    					type="primary"
    					style="margin-right: 10px;"
    					:loading="data.loading"
    					@click="click2Refresh()">刷新分组</Button>

    				<Button 
    					type="primary" 
    					@click="click2New()">新增分组</Button>

    			</div>
    			
    			<CAttributeTagGroupListView
        			:data="data"
        			@on-action="clickItem2ListView">
    			</CAttributeTagGroupListView>
    		</div>
		
		<!-- 职业属性分组编辑窗口 -->
	    <CAttributeTagGroupEditModal
	    		:data="editData"
	    		@on-submit="submit2Edit">
	    </CAttributeTagGroupEditModal>
		
	</div>
</template>

<script>
	import CAttributeTagGroupListView from '@/pages/tag/view/CAttributeTagGroupListView.vue';
	import CAttributeTagGroupSortView from '@/pages/tag/view/CAttributeTagGroupSortView.vue';
	import CAttributeTagGroupEditModal from '@/pages/tag/view/CAttributeTagGroupEditModal.vue';
	
	import TagService from '@/services/TagService.js';
	const $tagService = TagService();
	
	const $data = {
		sortBtnLoading: false,
		data: {
			data: [],
			loading: true,
			sortable : false
		},
		editData: {
			isShow: false,
			isSubmit: false,
			actionType: 1,
			index: 0,
			data: {
				
			}
		}
	}
	export default {
		data() {
			return $data;
		},
		mounted() {
			this.getGroups();
		},
		components: {
			CAttributeTagGroupSortView, CAttributeTagGroupListView, CAttributeTagGroupEditModal
		},
		methods: {
			click2Sort: function() {
				var $this = this;
				if(!$this.data.sortable) {
					$this.data.sortable = true;
				} else {
					var sorts = [];
					var len = $this.data.data.length;
					$this.data.data.forEach(function(item, index) {
						sorts.push({
							id: item.gid,
							sort: index
						})
					});
					$this.sortBtnLoading = true;
					$tagService.editSorts2AtagGroup(JSON.stringify(sorts))
					.then(function(response) {
						var res = response.data;
						var code = res.rescode;
						var msg = res.msg;
						if(code == 100) {
							$this.data.sortable = false;
						}
						$this.sortBtnLoading = false;
						$this.$Message.info(msg);
					}, function(error) {
						$this.sortBtnLoading = false;
						$this.$Message.error('网络异常，请稍后再试！');
					});
				}
			},
			click2CancelSort: function() {//取消排序
				var $this = this;
				$this.data.sortable = false;
			},
			click2Refresh() {//点击刷新
			 	this.getGroups();
			},
			click2New() {
				var $this = this;
				$this.editData.data = {
					gid: null,
					name: null
				}
				$this.editData.actionType = 1;
				$this.editData.isShow = true;
			},
			clickItem2ListView(type, data) {
				var $this = this;
				var index = data.index;
				var row =  data.row;
				if(type == 'edit') {
					if(type == 'edit') {
						var $this = this;
						$this.editData.data = {
							gid: row.gid,
							name: row.name
						}
						$this.editData.actionType = 2;
						$this.editData.isShow = true;
						$this.editData.index = index;
					}
				} else {
					this.$Modal.confirm({
                    title: "删除分组",
                    content: "您确定要删除分组吗？",
                    onOk() {
                    		$tagService.delGroup2Atag(row.gid)
								.then(function(response) {
									var res = response.data;
									var code = res.rescode;
									if(code == 100) {
										$this.data.data.splice(index, 1);
										$this.$Message.success(res.msg);
									} else {
										$this.$Message.error(res.msg);
									}
								}, function(error) {
									$this.$Message.error('网络异常，请稍后再试！');
								});
		                    }
		                });
				}
			},
			submit2Edit(form) {//编辑框-确认事件
				var $this = this;
				var data = form.data;
				var actionType = form.actionType;
				var index = form.index;
				var datas = this.data.data;
				form.isSubmit = true;
				$tagService.editGroup2Atag({
					gid: data.gid,
					name: data.name,
					sort: data.sort
				}).then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						if(actionType == 1) {
							datas.push(res.data);
						} else {
							datas.splice(index, 1, res.data);
						}
						$this.$Message.success(res.msg);
					} else {
						$this.$Message.error(res.msg);
					}
					form.isSubmit = false;
					form.isShow = false;
				}, function(error) {
					form.isSubmit = false;
					$this.$Message.error("服务器异常或网络异常");
				});
			},
			cancelSortBtn: function(index) {
				$data.sortParams.sortable = false;
			},
			getGroups() {
				var $this = this;
				this.data.loading = true;
				$tagService.getGroups2Atag()
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						$this.data.data = res.data;
					}
					$this.data.loading = false;
				}, function(error) {
					$this.data.loading = false;
					$this.$Message.error("网络异常，请稍后再试！");
				});
			}
		}
	}
</script>

<style scoped="scoped">
	.page {
	}
	
	.sort-view {
		margin-bottom: 20px;
	}
	
	.btns-view {
		margin-bottom: 20px;
		display: flex;
		display: -webkit-flex;
	}
	.data-view {
	}
</style>